@(sessions: List[MovieSession], ticketForm: Form[TicketForm])(implicit lang: Lang)

@main("The Cult Cinema Inc. Movie"){

	<section style="padding-top:60px">
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
							<li><a href="@routes.Application.index(lang.code)">@Messages("home")(lang)</a> <span class="divider">/</span></li>
							<li><a href="@routes.Staff.sale(lang.code)">@Messages("staff.sale")(lang)</a> <span class="divider">/</span></li>
		        			<li class="active">@Messages("movie.seating")(lang)</li>
		        		</ul>
					</div>
				</div>
				<div class="row">
					<div class="span12">
						<div class="tabbable tabs-left">
							<ul class="nav nav-tabs" style="margin-right:0">
								@sessions.map { session =>
						    		<li class="well" style="padding:0;margin:0;"><a href="#session@session.id" data-toggle="tab">@session.showtime.format("dd/MM") @session.movie.infos.get(0).name<br />(@session.showtime.format("hh:mmaa") - @(new Date(session.showtime.getTime()+(60*1000*session.movie.duration)).format("hh:mmaa")))</a></li>
						    	}
						    	<li class="well" style="padding:0;margin:0;"><a href="#sessionConfirm" data-toggle="tab">@Messages("movie.payment.confirm")(lang)</a></li>
						    </ul>
						    <div class="tab-content">
						    	@sessions.map { session =>
						    		<div class="tab-pane well" style="height:520px;padding:0" id="session@session.id">
								    	@movie.seat(session.id, session.house)(lang)
									</div>
								}
								<div class="tab-pane well" id="sessionConfirm">
									<table id="chosenSeat" class="table">
										<thead>
											<tr>
												<th>@Messages("movie")(lang)</th>
												<th>@Messages("movie.date")(lang)</th>
												<th>@Messages("movie.time")(lang)</th>
												<th>@Messages("movie.ticket.house")(lang)</th>
												<th>@Messages("movie.ticket.seat")(lang)</th>
												<th>@Messages("movie.ticket.price")(lang)</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
									@helper.form(action = routes.Staff.payment()) {
								        <input type="hidden" id="saleTicket" name="seat" value="">
								        <input type="hidden" name="session" value="@sessions.map { session =>:@session.id}">
								        <input type="hidden" name="lang" value="@lang.code">
										<input type="submit" class="btn btn-success btn-block" value="@Messages("movie.buy")(lang)" />
									}

								</div>
						    </div>
						</div>

					</div>
				</div>
  			</section>
  			<script>
  				$(function(){
	  				$("li.well:first").addClass("active");
	  				$("div.tab-pane.well:first").addClass("active");

	  				$.blockUI({ css: {
			            border: 'none',
			            padding: '15px',
			            backgroundColor: '#000',
			            '-webkit-border-radius': '10px',
			            '-moz-border-radius': '10px',
			            opacity: .5,
			            color: '#fff'
			        } });

				   	$.when(
				   		@sessions.map { session =>
					        $.ajax({
					            url: '@routes.MovieManager.checkAvailableSeat(session.id)',
					            success: function(data) {
						            var hold = data.hold;
						            var sold = data.sold;
						            var unavailable = data.unavailable;

						            for(var i=0;i<hold.length;i++){
										$("[data-session=@session.id][data-seat="+hold[i]+"]").addClass("hold");
									}

									for(var i=0;i<sold.length;i++){
										$("[data-session=@session.id][data-seat="+sold[i]+"]").addClass("sold");
									}

									for(var i=0;i<unavailable.length;i++){
										$("[data-session=@session.id][data-seat="+unavailable[i]+"]").addClass("null");
									}

									$('td.seat:not(.null):not(.hold):not(.sold):not(.demo):not(.demo-description)[data-session=@session.id]').click(function(e){

										var seat = $(e.currentTarget).data("seat");

										if($(e.currentTarget).hasClass('selected')){
											$("tr#session@(session.id)seat"+seat).remove();
											$(e.currentTarget).removeClass('selected');

											var tickets = Array();
											$("table#chosenSeat tbody tr").each(function(){
												tickets.push($(this).data("id"))
											});

											$("input#saleTicket").val(tickets.join(','));

										} else {
											$("table#chosenSeat tbody").append(
												"<tr data-id='@(session.id):" + seat + "' id='session@(session.id)seat" + seat + "'>" +
													"<td>@session.movie.infos.get(0).name</td>" +
													"<td>@session.showtime.format("yyyy-MM-dd")</td>" +
													"<td>@session.showtime.format("hh:mmaa") - @(new Date(session.showtime.getTime()+(60*1000*session.movie.duration)).format("hh:mmaa"))</td>" +
													"<td>@session.house.id</td>" +
													"<td>" + seat + "</td>" +
													"<td>$@session.price</td>" +
												"</tr>"
											);
											$(e.currentTarget).addClass('selected');

											var tickets = Array();
											$("table#chosenSeat tbody tr").each(function(){
												tickets.push($(this).data("id"))
											});

											$("input#saleTicket").val(tickets.join(','));

										}

									});

					            }
					        }),
					    }
					    	$.ajax({
					            url: '@routes.MovieManager.checkAvailableSeat(1)',
					            success: function(data) {
					                //alert('DUMMY')
					            }
					        })
				    ).then(function(){



				        $.unblockUI();
				    });

  				});

  			</script>

}(lang)
